<!DOCTYPE html>
<html lang="zh_cn">
<head>
    <meta charset="UTF-8">
    <title>打开表单设计器</title>
    <script type="text/javascript" charset="utf-8" src="../plugins/jquery/1.10.2/jquery.min.js"></script>
    <link rel="stylesheet" href="../plugins/miniui/themes/default/miniui.css" type="text/css">
    <link rel="stylesheet" href="../plugins/miniui/themes/icons.css" type="text/css">

    <link rel="stylesheet" href="../plugins/miniui/themes/pure/skin.css" type="text/css">
    <script type="text/javascript" charset="utf-8" src="../plugins/miniui/miniui.js"></script>


</head>
<body>
    <iframe frameborder="0" id="designer" src="../admin/form/designer-drag/index.html" style="width: 100%;height: 800px;border: 0"></iframe>
<div style="width: 200px;margin: auto">
    <a class="mini-button" onclick="save" iconCls="icon-save">保存配置</a>
    <a class="mini-button" onclick="clean" iconCls="icon-reload">清空配置</a>
</div>
</body>
</html>
<script type="text/javascript">
    var designerFrame = $("#designer");
    var config ={"html":"\n                <div class=\"mini-col-12 form-component\" hs-id=\"a09f70b385db09c690097684e1121e39\"><fieldset style=\"border: 0;\" class=\"brick child-form\"><legend align=\"center\" title=\"表格表单\" style=\"font-size: 20px\" class=\"\"><span>表格表单</span></legend><div class=\"components table ui-sortable\" style=\"\"><div class=\"mini-col-4 form-component\" hs-id=\"a4e6e16208e084cb326f89445ae8b45d\"><div class=\"form-item brick\"><label class=\"form-label\">单选</label><div class=\"input-block component-body\"><div class=\"mini-radiobuttonlist\" style=\"border-width: 0px; width: 100%; height: 100%; padding: 0px;\"><table cellpadding=\"0\" border=\"0\" cellspacing=\"0\" style=\"display:table;\"><tbody><tr><td><div class=\"mini-list-inner\"><div id=\"mini-124$0\" index=\"0\" class=\"mini-radiobuttonlist-item\" style=\"\"><span class=\"mini-list-icon\"></span><input style=\"display:none;\" onmousedown=\"this._checked = this.checked;\" onclick=\"this.checked = this._checked\" value=\"1\" id=\"mini-124$ck$0\" type=\"radio\"><label for=\"mini-124$ck$0\" onclick=\"return false;\">选项1</label></div><div id=\"mini-124$1\" index=\"1\" class=\"mini-radiobuttonlist-item mini-radiobuttonlist-item-selected\" style=\"\"><span class=\"mini-list-icon\"></span><input style=\"display:none;\" onmousedown=\"this._checked = this.checked;\" onclick=\"this.checked = this._checked\" value=\"2\" id=\"mini-124$ck$1\" type=\"radio\"><label for=\"mini-124$ck$1\" onclick=\"return false;\">选项2</label></div></div><div class=\"mini-errorIcon\"></div><input type=\"hidden\" value=\"2\"></td></tr></tbody></table></div></div></div></div><div class=\"mini-col-4 form-component\" hs-id=\"8dc0a5a4da925ae7cdf0d4ab91878b0b\"><div class=\"form-item brick\"><label class=\"form-label\">多选</label><div class=\"input-block component-body\"><div class=\"mini-checkboxlist\" style=\"border-width: 0px; width: 100%; height: 100%; padding: 0px;\"><table cellpadding=\"0\" border=\"0\" cellspacing=\"0\" style=\"display:table;\"><tbody><tr><td><div class=\"mini-list-inner\"><div id=\"mini-150$0\" index=\"0\" class=\"mini-checkboxlist-item mini-checkboxlist-item-selected\" style=\"\"><span class=\"mini-list-icon\"></span><input style=\"display:none;\" onmousedown=\"this._checked = this.checked;\" onclick=\"this.checked = this._checked\" value=\"1\" id=\"mini-150$ck$0\" type=\"checkbox\"><label for=\"mini-150$ck$0\" onclick=\"return false;\">选项1</label></div><div id=\"mini-150$1\" index=\"1\" class=\"mini-checkboxlist-item mini-checkboxlist-item-selected\" style=\"\"><span class=\"mini-list-icon\"></span><input style=\"display:none;\" onmousedown=\"this._checked = this.checked;\" onclick=\"this.checked = this._checked\" value=\"2\" id=\"mini-150$ck$1\" type=\"checkbox\"><label for=\"mini-150$ck$1\" onclick=\"return false;\">选项2</label></div></div><div class=\"mini-errorIcon\"></div><input type=\"hidden\" value=\"1,2\"></td></tr></tbody></table></div></div></div></div><div class=\"mini-col-4 form-component\" hs-id=\"b841f42919101fc754a40bd17c640d7e\"><div class=\"form-item brick\"><label class=\"form-label\">下拉列表</label><div class=\"input-block component-body\"><span class=\"mini-buttonedit mini-combobox mini-popupedit\" style=\"border-width: 0px; width: 100%; height: 100%; padding: 0px;\"><span class=\"mini-buttonedit-border\"><input type=\"text\" class=\"mini-buttonedit-input\" autocomplete=\"off\" placeholder=\"\"><span class=\"mini-buttonedit-buttons\"><span class=\"mini-buttonedit-close\" name=\"close\"></span><span title=\"\" name=\"trigger\" class=\"mini-buttonedit-button mini-buttonedit-trigger\" onmouseover=\"O001(this,'mini-buttonedit-button-hover');\" onmouseout=\"o11O(this,'mini-buttonedit-button-hover');\"><span class=\"mini-buttonedit-icon\"></span></span></span></span><input name=\"\" type=\"hidden\" value=\"\"></span></div></div></div><div class=\"mini-col-4 form-component\" hs-id=\"e0029a5eb52f69ae2afe4282702fcaf3\"><div class=\"form-item brick\"><label class=\"form-label\">树列表</label><div class=\"input-block component-body\"><span class=\"mini-buttonedit mini-treeselect mini-popupedit\" style=\"border-width: 0px; width: 100%; height: 100%; padding: 0px;\"><span class=\"mini-buttonedit-border\"><input type=\"text\" class=\"mini-buttonedit-input\" autocomplete=\"off\" placeholder=\"\"><span class=\"mini-buttonedit-buttons\"><span class=\"mini-buttonedit-close\" name=\"close\"></span><span title=\"\" name=\"trigger\" class=\"mini-buttonedit-button mini-buttonedit-trigger\" onmouseover=\"O001(this,'mini-buttonedit-button-hover');\" onmouseout=\"o11O(this,'mini-buttonedit-button-hover');\"><span class=\"mini-buttonedit-icon\"></span></span></span></span><input name=\"\" type=\"hidden\" value=\"2\"></span></div></div></div></div></fieldset></div>","useIdForName":false,"components":[{"config":{},"properties":[{"id":"comment","editor":"textbox","text":"描述","value":"表格表单"},{"id":"showComment","text":"显示描述","value":"true"},{"id":"emptyText","text":"提示","value":""},{"id":"type","editor":"textbox","text":"控件类型"},{"id":"size","text":"控件宽度","value":"12"},{"id":"bodyHeight","text":"高度","value":"","comment":"设置为最小值,高度为自动"}],"id":"a09f70b385db09c690097684e1121e39","typeName":"表格表单","type":"table"},{"config":{},"properties":[{"id":"name","editor":"textbox","text":"字段","value":""},{"id":"comment","editor":"textbox","text":"描述","value":"单选"},{"id":"showComment","text":"显示描述","value":"true"},{"id":"emptyText","text":"提示","value":""},{"id":"type","editor":"textbox","text":"控件类型"},{"id":"size","text":"控件宽度","value":"4"},{"id":"required","editor":"radio","text":"是否必填","value":"undefined"},{"id":"option","text":"选项配置","value":{"type":"data","data":[{"id":"1","text":"选项1"},{"id":"2","text":"选项2"}]}}],"id":"a4e6e16208e084cb326f89445ae8b45d","cls":"mini-radiobuttonlist","typeName":"单选","type":"radio"},{"config":{},"properties":[{"id":"name","editor":"textbox","text":"字段","value":""},{"id":"comment","editor":"textbox","text":"描述","value":"多选"},{"id":"showComment","text":"显示描述","value":"true"},{"id":"emptyText","text":"提示","value":""},{"id":"type","editor":"textbox","text":"控件类型"},{"id":"size","text":"控件宽度","value":"4"},{"id":"required","editor":"radio","text":"是否必填","value":"undefined"},{"id":"option","text":"选项配置","value":{"type":"data","data":[{"id":"1","text":"选项1"},{"id":"2","text":"选项2"}]}}],"id":"8dc0a5a4da925ae7cdf0d4ab91878b0b","cls":"mini-checkboxlist","typeName":"多选","type":"checkbox"},{"config":{},"properties":[{"id":"name","editor":"textbox","text":"字段","value":""},{"id":"comment","editor":"textbox","text":"描述","value":"下拉列表"},{"id":"showComment","text":"显示描述","value":"true"},{"id":"emptyText","text":"提示","value":""},{"id":"type","editor":"textbox","text":"控件类型"},{"id":"size","text":"控件宽度","value":"4"},{"id":"required","editor":"radio","text":"是否必填","value":"undefined"},{"id":"option","text":"选项配置","value":{"type":"data","data":[{"id":"1","text":"选项1"},{"id":"2","text":"选项2"}]}},{"id":"allowInput","text":"可手动输入","value":"true"},{"id":"multiSelect","text":"多选","value":"false"}],"id":"b841f42919101fc754a40bd17c640d7e","cls":"mini-combobox","type":"combobox","typeName":"单行文本"},{"config":{},"properties":[{"id":"name","editor":"textbox","text":"字段","value":""},{"id":"comment","editor":"textbox","text":"描述","value":"树列表"},{"id":"showComment","text":"显示描述","value":"true"},{"id":"emptyText","text":"提示","value":""},{"id":"type","editor":"textbox","text":"控件类型"},{"id":"size","text":"控件宽度","value":"4"},{"id":"required","editor":"radio","text":"是否必填","value":"undefined"},{"id":"option","text":"选项配置","value":{"type":"data","url":"","textField":"","idField":"","dataField":"","resultAsTree":"","parentField":"","pagesize":"","data":[{"id":"1","text":"选项1","expanded":true,"_level":0,"children":[{"id":"2","text":"选项2","expanded":false,"_level":1,"pid":113,"_id":2,"_uid":2,"_pid":1,"checked":true}],"_id":1,"_uid":1,"_pid":-1}]}},{"id":"allowInput","text":"可手动输入","value":"true"},{"id":"multiSelect","text":"多选","value":"true"}],"id":"e0029a5eb52f69ae2afe4282702fcaf3","cls":"mini-treeselect","typeName":"树列表","type":"treeselect"}]};

    var designer;

    function initFrame() {
        //初始化设计器
        var win =designerFrame[0].contentWindow;

        if(win){
            win.ready=function () {
                designer=this;
                designer.loadConfig(config);
            }
        }
    }
    $(designerFrame).on("load",initFrame);
    initFrame();

    function save() {

        alert(JSON.stringify(designer.getConfig()));
    }
    function clean() {
        designer.loadConfig({html:"",components:[]})
    }
</script>